<template>
    <div>
        <div class="container">
            <TableCustom :columns="columns" :tableData="tableData" :viewFunc="handleView"
                :delFunc="handleDelete" :total="page.total" :page-count="page.pageCount" 
                :current-page="page.currentPage" :page-size="page.size" :changePage="changePage" 
                :handle-size-change="handleSizeChange"
                :editFunc="handleEdit" :refresh="getData" style="height: calc(100vh - 300px);">
                <template #toolbarBtn>
                    <el-button type="warning" :icon="CirclePlusFilled" @click="visible = true">新增</el-button>
                </template>
            </TableCustom>
             
        </div>
        <el-dialog :title="isEdit ? '编辑' : '新增'" v-model="visible" width="700px" destroy-on-close
            :close-on-click-modal="false" @close="closeDialog">
            <TableEdit :form-data="rowData" :options="options" :edit="isEdit" :update="updateData" />

        </el-dialog>
        <el-dialog title="查看详情" v-model="visible1" width="700px" destroy-on-close>
            <TableDetail :data="viewData"></TableDetail>
        </el-dialog>
    </div>
</template>

<script setup lang="ts" name="worklog">
import { ref, reactive,onMounted,watch } from 'vue';

import { ElMessage } from 'element-plus';
import { CirclePlusFilled } from '@element-plus/icons-vue';
import { fetchWorkDaily,saveWorkDaily,delWorkDaily, fetchAreaLeve1, fetchAreaLeve2,fetchWorkType } from '@/api';
import TableCustom from '@/components/table-custom.vue';
import TableDetail from '@/components/table-detail.vue';
import { FormOption, FormOptionList } from '@/types/form-option';

// 表格相关
let columns = ref([
    { type: 'id', prop : 'labelId', label: '序号', width: 55, align: 'center' },
    { prop: 'level1Name', label: '一级区域' },
    { prop: 'level2Name', label: '二级区域' },
    { prop: 'workDate', label: '作业日期' },
    { prop: 'workType', label: '作业类型' },
    { prop: 'workName', label: '作业种类' },
    { prop: 'workerCount', label: '作业人数' },
    { prop: 'vehicleCount', label: '作业车辆' },

    { prop: 'operator', label: '操作', width: 250 }
])





const changePage = (val: number) => {
	page.index = val;
    page.currentPage = val;
	getData();
};

const handleSizeChange = (val: number) => {
    page.size = val;
    page.index = 1;
    page.currentPage = 1;
    getData();
};

const page = reactive({
    total: 0,
    index: 1,
    size: 50,
    hasPagination: true,
    layout: 'prev, pager, next,total',
    currentPage: 1,
    pageCount: 1
})
const tableData = ref<[]>();
const getData = async () => {
    const res = await fetchWorkDaily(page.index, page.size);
    tableData.value = res.data.content;
    tableData.value.forEach((item, index) => {
        item.labelId = index + 1 + (page.index - 1) * page.size;
    })
    page.index = res.data.number + 1;
    page.total = res.data.totalElements;
    page.size = res.data.size;
    page.pageCount = res.data.totalPages;

    const res1 = await fetchAreaLeve2(1,100);
    const cascaderOptions = res1.data.content.map(item => ({
        value: item.areaLevel1Name,
        label: item.areaLevel1Name,
        children: [{
            value: item.areaName,
            label: item.areaName
        }]
    }));
    options.value.list[1].opts = cascaderOptions;

};

const saveWorkDailyFunc = async (data) => {
    data.areaLevel1Name = data.area[0];
    data.areaName = data.area[1];
    // 这里可以添加调用API的逻辑来新增公司
    await saveWorkDaily(data); 
    getData();
};

const delWorkDailyFunc = async (id) => {

    // 这里可以添加调用API的逻辑来新增公司
    await delWorkDaily(id); 
    getData();
};
getData();


// 新增/编辑弹窗相关
let options = ref<FormOption>({
    labelWidth: '100px',
    span: 12,
    list: [
        { type: 'input', label: '序号', prop: 'id', required: false, disabled: true},
        { type: 'cascader', label: '区域', prop: 'area', required: true },
        { type: 'date', format: 'yyyy-MM-dd', label: '作业日期', prop: 'workDate', required: true },
        { type: 'select', label: '作业类型', prop: 'workType', required: false },
        { type: 'select', label: '作业种类', prop: 'workName', required: false },
        { type: 'number', label: '作业人数', prop: 'workerCount', required: true, min: 0 },
        { type: 'number', label: '作业车辆', prop: 'vehicleCount', required: true, min: 0 },
    ]
})
const visible = ref(false);
const isEdit = ref(false);
const rowData = ref<{}>({} as {});
const handleEdit = (row) => {
    rowData.value = { ...row };
    rowData.value.area = [row.areaLevel1Name, row.areaName];
    isEdit.value = true;
    visible.value = true;
};


const updateData = async (data) => {
    if (data.endDate < data.startDate) {
        ElMessage.error('结束日期不能早于开始日期');
        return;
    }

    await saveWorkDailyFunc(data);
    if (!isEdit.value) {
        ElMessage.success('新增成功');
    } else {
        ElMessage.success('编辑成功');
    }
    closeDialog();
    getData();
};

const closeDialog = () => {
    visible.value = false;
    isEdit.value = false;
};

// 查看详情弹窗相关
const visible1 = ref(false);
const viewData = ref({
    row: {},
    list: []
});
const handleView = (row) => {
    viewData.value.row = { ...row }
    viewData.value.list = [
        { type: 'id', prop: 'id', label: '序号' },
        { prop: 'level1Name', label: '一级区域' },
        { prop: 'level2Name', label: '二级区域' },
        { prop: 'workDate', label: '作业日期' },
        { prop: 'workType', label: '作业类型' },
        { prop: 'workName', label: '作业种类' },
        { prop: 'workerCount', label: '作业人数' },
        { prop: 'vehicleCount', label: '作业车辆' },

    ]
    visible1.value = true;
};

// 删除相关
const handleDelete = (row) => {
    delWorkDailyFunc(row.id);
    ElMessage.success('删除成功');
}
</script>

<style>

.container {
    min-height: calc(100vh - 150px) !important; 
    box-sizing: border-box;
    background: #fff;
    padding: 20px;
    overflow: auto;
}

</style>